<script setup lang="ts">
import { ref, watch } from 'vue'
import allAreas from '../lib/pca-code.json'

export interface AreaItem {
  name: string
  code: string
  children?: AreaItem[]
}

export interface Data {
  name: string
  code: string
}

// 下拉框选择省份的值
let province = ref<string>()
// 下拉框选择城市的值
let city = ref<string>()
// 下拉框选择区域的值
let area = ref<string>()
// 获取json文件中的所有省市区数据
let areas = ref(allAreas)

// 城市下拉框的所有值
let selectCity = ref<AreaItem[]>([])
// 区域下拉框的所有值
let selectArea = ref<AreaItem[]>([])

// 分发事件给父组件
let emits = defineEmits(['change'])

watch(
  () => province.value,
  val => {
    if (val) {
      // 过滤省份对应的城市
      let cities = areas.value.find(item => item.code === province.value)!
        .children!
      selectCity.value = cities
    }
    city.value = ''
    area.value = ''
  }
)

watch(
  () => city.value,
  val => {
    if (val) {
      // 过滤省份对应的城市
      let areas = selectCity.value.find(item => item.code === city.value)!
        .children!
      selectArea.value = areas
    }
    area.value = ''
  }
)

// 监听选择区域
watch(
  () => area.value,
  val => {
    if (val) {
      let provinceData: Data = {
        name:
          province.value! &&
          allAreas.find(item => item.code === province.value)!.name,
        code: province.value!
      }
      let cityData: Data = {
        name:
          city.value! &&
          selectCity.value.find(item => item.code === city.value)!.name,
        code: city.value!
      }
      let areaData: Data = {
        name: val && selectArea.value.find(item => item.code === val)!.name,
        code: val
      }
      emits('change', {
        province: provinceData,
        city: cityData,
        area: areaData
      })
    }
  }
)
</script>

<template>
  <el-select clearable placeholder="请选择省份" v-model="province">
    <el-option
      v-for="item in areas"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </el-select>
  <el-select
    clearable
    :disabled="!province"
    placeholder="请选择城市"
    v-model="city"
  >
    <el-option
      v-for="item in selectCity"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </el-select>
  <el-select
    clearable
    :disabled="!province || !city"
    placeholder="请选择区域"
    v-model="area"
  >
    <el-option
      v-for="item in selectArea"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </el-select>
</template>

<style lang="scss" scoped>
.el-select {
  width: 200px;
}
</style>
